import { Button, Space } from 'ant-design-vue'
import { omitBy } from 'lodash-unified'
import { defineComponent, ref } from 'vue'

import { onlineApi } from '@/apis'
import { ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { TableOptions, useDialog, usePageHeight, useTableRef } from '@/hooks'

export default defineComponent({
  name: 'OnlineView',
  setup() {
    const tableConfig = ref({
      showOverflow: true,
      border: true,
      loading: false,
      height: 'auto',
      formConfig: {
        items: [
          {
            title: '用户名称',
            field: 'userName',
            itemRender: {
              name: TABLE_ITEM_RENDER.AInput,
              props: {
                placeholder: '请输入用户名称'
              }
            }
          },
          {
            itemRender: {
              name: TABLE_RENDERER.FormItemBtns
            }
          }
        ]
      },
      columns: [
        {
          type: 'seq',
          title: '序号'
        },
        {
          field: 'tokenId',
          title: '会话编号'
        },
        {
          field: 'userName',
          title: '登录名称'
        },
        {
          field: 'deptName',
          title: '部门名称'
        },
        {
          field: 'loginIp',
          title: '主机'
        },
        {
          field: 'loginLocation',
          title: '登录地点'
        },
        {
          field: 'browser',
          title: '浏览器'
        },
        {
          field: 'os',
          title: '操作系统'
        },
        {
          field: 'loginDate',
          title: '登录时间',
          formatter: TABLE_FORMAT.Date
        },
        {
          title: '操作',
          slots: {
            default: 'operation'
          }
        }
      ],
      pagerConfig: {
        pageSize: 15
      },
      proxyConfig: {
        seq: true,
        form: true,
        props: {
          result: 'result',
          total: 'page.total'
        },
        ajax: {
          query: ({ form, page }) => {
            return new Promise(resolve => {
              form = omitBy(form, value => {
                return value === null
              })

              onlineApi.getOnlinePage(form).then(value => {
                resolve({
                  page: {
                    total: value.length
                  },
                  result: value.slice(
                    (page.currentPage - 1) * page.pageSize,
                    page.currentPage * page.pageSize
                  )
                })
              })
            })
          }
        }
      }
    } as TableOptions)

    const { tableRef, ...tableRefRestHook } = useTableRef(tableConfig)
    const { pageHeightPx } = usePageHeight()

    function handleOffline(id: string) {
      const { showConfirm } = useDialog()

      showConfirm({
        content: '确认下线？',
        onOk: async () => {
          await onlineApi.offline(id)

          tableRefRestHook.refresh()
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      pageHeightPx,
      handleOffline
    }
  },
  render() {
    return (
      <div
        style={{
          height: this.pageHeightPx
        }}
      >
        <ProTable
          ref="tableRef"
          v-slots={{
            operation: ({ row }) => (
              <Space size={'small'}>
                <Button
                  type={'link'}
                  size={'small'}
                  onClick={() => this.handleOffline(row.tokenId)}
                >
                  下线
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
